class PageComponent{
    constructor(app){
        this.app=app;
        this.template = '';
        this.param = {};
        this.initComponent();
    }

    initComponent(){
        this.initTemplate();
        this.initParam();
    }

    initTemplate(){
        let template = `
        <div id="page">
         <nav aria-label="Page navigation  ">
          每页条数：
          <select v-model="pageSizeOpt" style="width: 100px">
           <option v-for="(item,index) in pageSizeOpts" :key="index" :value='item'>{{item}}</option>
          </select>
          <ul class="pagination pagination-sm justify-content-end">
           <li class="page-item" @click="previousPage()">
            <a class="page-link" href="#" aria-label="Previous">
             <span aria-hidden="true">&laquo;</span>
            </a>
           </li>
           <li class="page-item" v-for="(item, index) in beginTabs" :key="index" @click="changePage(item)">
            <a class="page-link" href="#">{{item}}</a>
           </li>
           <li v-if="tabs.length > 6">...</li>
           <li class="page-item" v-for="(item, index) in endTabs" :key="index" @click="changePage(item)">
            <a class="page-link" href="#">{{item}}</a>
           </li>
           <!--          <li class="page-item"><a class="page-link" href="#" @click="">2</a></li>-->
           <!--          <li class="page-item"><a class="page-link" href="#">3</a></li>-->
           <li class="page-item" @click="nextPage()">
            <a class="page-link" href="#" aria-label="Next">
             <span aria-hidden="true">&raquo;</span>
            </a>
           </li>
          </ul>
         </nav>
        </div>
        `
        this.template = template;
    }

    initParam(){
        let pageParam = {
            el:'#page',
            props: {
                total: { // 总条数
                    type: Number,
                    default:0,
                },
                pageSize: { // 每页条数
                    type: Number,
                    default: 2,
                },
                current: { // 当前页
                    type: Number,
                    default: 1,
                },
                maxTabNum: { // 显示的最多页码，超出省略号
                    type: Number,
                    default: 6,
                },
                pageSizeOpts: { // 每页切换配置
                    type: Array,
                    default: ()=>{
                        return [2, 10, 20, 40];
                    },
                },
            },
            template: this.template,
            data(){
                return{
                    tabs: [],// 页码数组
                    pageSizeOpt: 2,
                    pageNum: 0,
                }
            },
            mounted(){
                // alert(333)
                // alert(222)
                this.pageSizeOpt = this.pageSize;
                this.pageNum = this.current;
                // this.initTabs();
            },
            computed: {
                beginTabs(){
                    const that = this;
                    return that.tabs.length > 3 ? that.tabs.slice(0,3): that.tabs;
                },
                endTabs(){
                    const that = this;
                    return that.tabs.length > 5 ? that.tabs.slice(3): [];
                },
            },
            watch:{
                total: {
                    handler(newVal, oldVal) {
                        this.initTabs();
                    },
                },
                pageSizeOpt:{  // 改变条数
                    handler(newVal, oldVal) {
                        const that = this;
                        that.$emit("on-page-size-change", newVal);
                        that.initTabs();
                    },
                },
                // pageSize:{  // 改变条数
                //   handler(newVal, oldVal) {
                //     const that = this;
                //     that.initTabs();
                //   },
                // },
            },
            methods: {
                // 计算页码数组
                initTabs() {
                    const that = this;
                    if (!that.total || !that.pageSizeOpt || !that.current) {
                        return;
                    }
                    // 获取所有页码数量
                    const tabNum = that.total / that.pageSizeOpt;
                    let totalTabNum = parseInt(tabNum);
                    if (totalTabNum < tabNum) {
                        totalTabNum += 1;
                    }
                    // 够六个和不够六个两种情况
                    if (totalTabNum > that.maxTabNum) {
                        // 取前三个和后三个中间省略号
                        that.tabs = [1, 2, 3];
                        for (let i = totalTabNum, j = 3; j >= 0; i--, j++) {
                            that.tabs.splice(j, 0, j + 1);
                        }
                    } else {
                        that.tabs = [];
                        for (let i = 1; i <= totalTabNum; i++) {
                            that.tabs.push(i);
                        }
                    }
                },
                // 改变页码
                changePage(pageNum) {
                    const that = this;
                    that.pageNum = pageNum;
                    that.$emit("on-change", pageNum);
                },
                previousPage() {
                    const that = this;
                    if (that.pageNum <= 1) {
                        return;
                    }
                    that.pageNum -= 1;
                    that.$emit("on-change", that.pageNum);
                },
                nextPage() {
                    const that = this;
                    if (that.pageNum >= that.tabs[that.tabs.length - 1]) {
                        return;
                    }
                    that.pageNum += 1;
                    that.$emit("on-change", that.pageNum);
                },
            }
        };
        this.app.component('page', pageParam);
    }
}




